<template>
  <div class="content">
    <el-form inline :model="form">
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始时间"
          v-model="form.startTime"
          size="mini"
          default-time="00:00:00"
          :picker-options="pickerOptions0"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          placeholder="选择结束时间"
          v-model="form.endTime"
          size="mini"
          :picker-options="pickerOptions0"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="统计时间类型">
        <el-select v-model="form.timeType" size="mini">
          <el-option label="每10分钟" value="10"></el-option>
          <el-option label="每1小时" value="1"></el-option>
          <el-option label="每2小时" value="2"></el-option>
          <el-option label="每6小时" value="6"></el-option>
          <el-option label="每12小时" value="12"></el-option>
          <el-option label="每24小时" value="24"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <p class="data" v-show="show">暂无数据</p>
    <div id="single" v-show="shows" style="height: 74.5vh"></div>
  </div>
</template>

<script>
import { getDeformationRate } from "../../../../api/Monitoring";
import moment from "moment";
export default {
  name: "CumulativeAnalysisChart",
  props: {
    node: Object,
  },
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      form: {
        timeType: "1",
        startTime: moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00"),
        endTime: moment().format("YYYY-MM-DD hh:mm:ss"),
      },
      staticsEchart: false,
      myChart: null,
      show: false,
      shows: true,
    };
  },
  methods: {
    SinglePointAnalysis(down, up, sensorName) {
      if ((down == null, up == null)) {
        this.show = true;
        this.shows = false;
      }
      let upxdata = [],
        upydata = [],
        uphdata = [],
        downydata = [],
        downhdata = [],
        downxdata = [],
        theDate = [];
      let downName1 = null;
      let downName2 = null;
      let downName3 = null;
      let upName1 = null;
      let upName2 = null;
      let upName3 = null;

      if (down !== null) {
        downName1 = down[0].monitorName + "-∆X";
        downName2 = down[0].monitorName + "-∆Y";
        downName3 = down[0].monitorName + "-∆H";
        for (let i = down.length - 1; i >= 0; i--) {
          downxdata.push(Number(down[i].xdata).toFixed(3));
          downydata.push(Number(down[i].ydata).toFixed(3));
          downhdata.push(Number(down[i].hdata).toFixed(3));
          // console.log(downxdata);
          if (down !== null) {
            theDate.push(down[i].theDate);
          }
        }
      } else if (down == null) {
        downName1 = 1;
        downName2 = 1;
        downName3 = 1;
      }
      if (up !== null) {
        upName1 = up[0].monitorName + "-∆X";
        upName2 = up[0].monitorName + "-∆Y";
        upName3 = up[0].monitorName + "-∆H";
        for (let j = up.length - 1; j >= 0; j--) {
          upxdata.push(Number(up[j].xdata).toFixed(3));
          upydata.push(Number(up[j].ydata).toFixed(3));
          uphdata.push(Number(up[j].hdata).toFixed(3));
          if (down == null) {
            theDate.push(up[j].theDate);
          }
        }
        console.log(uphdata);
      } else if (up == null) {
        upName1 = "";
        upName2 = "";
        upName3 = "";
      }
      let danwei = "";
      if (this.form.timeType == "10") {
        danwei = "10min";
      }
      if (this.form.timeType == "1") {
        danwei = "1h";
      }
      if (this.form.timeType == "2") {
        danwei = "2h";
      }
      if (this.form.timeType == "6") {
        danwei = "6h";
      }
      if (this.form.timeType == "12") {
        danwei = "12h";
      }
      if (this.form.timeType == "24") {
        danwei = "24h";
      }
      let myChart = this.$echarts.init(document.getElementById("single"));
      let chartOption = {
        title: {
          text: "表面位移" + sensorName + "同级子坝变形速率分析图",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            let tip = params[0].name + "<br/>";
            for (let y = 0; y < params.length; y++) {
              tip +=
                params[y].marker +
                params[y].seriesName +
                " : " +
                params[y].value +
                " mm<br/>";
            }
            return tip;
          },
        },
        color: ["#33FFFF", "#66FF66", "#CC00FF"],
        legend: {
          // bottom: "bottom",
          top: 30,
          itemHeight: 2,
          data: [
            { name: downName1, icon: "rect" },
            { name: downName2, icon: "rect" },
            { name: downName3, icon: "rect" },
            {
              name: upName1,
              icon: "image://" + require("../../../../assets/xuxian/1.png"),
            },
            {
              name: upName2,
              icon: "image://" + require("../../../../assets/xuxian/2.png"),
            },
            {
              name: upName3,
              icon: "image://" + require("../../../../assets/xuxian/3.png"),
            },
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          right: "5%",
        },
        xAxis: {
          name: "时间",
          nameLocation: "center",
          nameTextStyle: {
            padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
          },
          type: "category",
          boundaryGap: false,
          data: theDate,
        },
        yAxis: {
          name: "位移" + "(" + "mm" + "/" + danwei + ")",
          type: "value",
          // axisLabel: {
          //     formatter: '{value} mm'
          // }
        },

        series: [
          {
            name: downName1,
            type: "line",
            data: downxdata,
            lineStyle: {
              color: "#33FFFF",
            },
          },
          {
            name: downName2,
            type: "line",
            data: downydata,
            lineStyle: {
              color: "#66FF66",
            },
          },
          {
            name: downName3,
            type: "line",
            data: downhdata,
            lineStyle: {
              color: "#CC00FF",
            },
          },
          {
            name: upName1,
            type: "line",
            data: upxdata,
            lineStyle: {
              color: "#33FFFF",
              type: "dotted",
            },
          },
          {
            name: upName2,
            type: "line",
            data: upydata,
            lineStyle: {
              color: "#66FF66",
              type: "dotted",
            },
          },
          {
            name: upName3,
            type: "line",
            data: uphdata,
            lineStyle: {
              color: "#CC00FF",
              type: "dotted",
            },
          },
        ],
      };
      myChart.hideLoading();
      myChart.setOption(chartOption);
      myChart.resize();
      myChart.on("legendselectchanged", function (params) {
        var selected = params.selected;
        if (selected[upName1]) {
          chartOption.legend.data[3].icon =
            "image://" + require("../../../../assets/xuxian/1.png");
        } else {
          chartOption.legend.data[3].icon =
            "image://" + require("../../../../assets/xuxian/5.png");
        }
        if (selected[upName2]) {
          chartOption.legend.data[4].icon =
            "image://" + require("../../../../assets/xuxian/2.png");
        } else {
          chartOption.legend.data[4].icon =
            "image://" + require("../../../../assets/xuxian/6.png");
        }
        if (selected[upName3]) {
          chartOption.legend.data[5].icon =
            "image://" + require("../../../../assets/xuxian/3.png");
        } else {
          chartOption.legend.data[5].icon =
            "image://" + require("../../../../assets/xuxian/7.png");
        }
        myChart.setOption(chartOption);
      });
      myChart.setOption(chartOption);
    },
    async search() {
      this.shows = true;
      this.show = false;
      let myChart = this.$echarts.init(document.getElementById("single"));
      myChart.showLoading();
      let queryData = {
        startTime: moment(this.form.startTime).format("YYYY-MM-DD hh:mm:ss"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD hh:mm:ss"),
        timeType: this.form.timeType,
      };
      await getDeformationRate({
        monitorCode: this.node.monitorCode,
        timeType: this.form.timeType,
        startTime: queryData.startTime,
        endTime: queryData.endTime,
      }).then((res) => {
        console.log(res);
        if (res.resultCode == "204") {
          this.shows = false;
          this.show = true;
          this.$message({
            message: "暂无数据",
            offset: 450,
            duration: 1000,
          });
        } else if (res.resultCode == "200") {
          this.shows = true;
          this.show = true;
          let down = res.parameter.down;
          let up = res.parameter.up;
          this.SinglePointAnalysis(down, up, this.node.label, myChart);
        }
      });
    },
  },
  mounted() {
    this.shows = true;
    this.show = false;
    let myChart = this.$echarts.init(document.getElementById("single"));
    myChart.showLoading();
    let queryData = {
      startTime: moment(this.form.startTime).format("YYYY-MM-DD hh:mm:ss"),
      endTime: moment(this.form.endTime).format("YYYY-MM-DD hh:mm:ss"),
      timeType: this.form.timeType,
    };
    getDeformationRate({
      monitorCode: this.node.monitorCode,
      timeType: this.form.timeType,
      startTime: queryData.startTime,
      endTime: queryData.endTime,
    }).then((res) => {
      console.log(res);
      if (res.resultCode == "204") {
        this.shows = false;
        this.show = true;
        this.$message({
          message: "暂无数据",
          offset: 450,
          duration: 1000,
        });
      } else if (res.resultCode == "200") {
        this.shows = true;
        this.show = false;
        let down = res.parameter.down;
        let up = res.parameter.up;
        this.SinglePointAnalysis(down, up, this.node.label, myChart);
      }
    });
  },
};
</script>

<style scoped>
.content {
  height: 83vh;
  overflow: auto;
}
.el-form-item {
  margin-bottom: 0;
}
.data {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
}
</style>
